<template>
    <!-- 港区百科 -->
    <div class="wiki flex" @click="closePort">
        <div class="left">
            <div class="search-box box">
                <div class="title">港区百科</div>
                <div class="input-box flex-al-center">
                    <div class="input">
                        <img src="@/assets/search.png" alt="">
                        <input type="text" v-model="keyword" @input.stop="getList">
                        <div class="result" v-if="showList">
                            <div class="r-li pointer" v-for="(item, index) in portList" :key="index" @click="getKey(item)">
                                {{
                                    item.name }}</div>
                        </div>
                    </div>
                    <div class="btn pointer" @click="getWiki">搜索</div>
                </div>
            </div>
            <div class="list box">
                <div class="title">常见港口</div>
                <div class="list-ul flex-al-center">
                    <div class="li pointer" v-for="(item, index) in commonPortList" :key="index" @click="getOne(item)">{{
                        item.name }}</div>
                </div>
            </div>
        </div>
        <div class="right box">
            <div class="title">
                港区百科介绍
            </div>

            <div class="name">
                {{wikiTitle}}
            </div>

            <div class="content">
                <div class="word">
                    <img align="right" hspace="2" vspace="5" v-if="picture" :src="picture" alt="">
                    <!-- {{ word }} -->
                    {{ content }}
                </div>


            </div>

        </div>
    </div>
</template>

<script>
import { debounce } from '@/utils/utils.js'
import { baseApi } from '@/config/index.js'
let that = null
export default {
    data() {
        return {
            keyword: "",
            imgUrl: baseApi,
            portInfo: {},
            content: "",
            picture: "",
            wikiTitle: "",
            id: null,
            showList: false,
            portList: ["舟山港", "宁波港"],
            commonPortList: [
                { name: "宁波舟山港", id: 1 },
                { name: "广州港", id: 22 },
                { name: "青岛港", id: 11 },
                { name: "天津港", id: 7 },
                { name: "龙口港", id: 8 },
                { name: "唐山港", id: 6 },
                { name: "上海港", id: 16 },
                { name: "大连港", id: 2 },

            ],
            word: ""
        }
    },
    created() {

    },
    mounted() {
        that = this
    },
    methods: {
        // 搜索防抖
        inputVal: debounce(function () {
            that.getList()
        }, 600),

        // 搜索接口
        getList(val) {
            if (this.keyword == "") {
                this.showList = false;
                return
            }
            console.log(this.keyword)
            // 搜索接口
            let data = {
                portName: this.keyword,
                pageNum: 1,
                pageSize: 10
            }
            this.$api.getPortAreaList(data).then(res => {
                if (res.code === 200) {
                    this.portList = res.data.list
                }
            })
            // this.portList = res.data
            this.showList = true;
        },

        // 隐藏列表
        closePort() {
            this.showList = false;
        },

        // 点击列表
        getKey(val) {
            this.keyword = val.name
            this.id = val.id
            this.showList = false
        },
        getOne(item) {
            let data = {
                portName: item.name,
                pageNum: 1,
                pageSize: 10
            }
            this.$api.getPortAreaList(data).then(res => {
                if (res.code === 200 && res.data.list.length !== 0) {
                    let data = {
                        id: res.data.list[0].id,
                    }
                    this.$api.selectOne(data).then(res => {
                        if (res.code === 200) {
                            this.content = res.data.content
                            console.log(res.data)
                            this.wikiTitle = item.name
                            this.picture = "https://www.weisou.online/wut_port/upload" + res.data.picture
                        } else {
                            this.content = "暂无数据"
                            this.picture = null

                        }
                    })
                }
            })
        },
        // 点击搜索
        getWiki() {
            console.log(this.keyword)

            let data = {
                id: this.id,
            }
            this.$api.selectOne(data).then(res => {
                if (res.code === 200) {
                    this.content = res.data.content
                    console.log(res.data)
                    this.picture = "https://www.weisou.online/wut_port/upload" + res.data.picture
                    this.wikiTitle = this.keyword
                    this.id = null
                } else {
                    this.content = "暂无数据"
                    this.picture = null

                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.wiki {
    background-color: #000C38;
    height: 90.7vh;

}

.box {
    background: #172C69;
    border-radius: 5px 5px 5px 5px;
    padding: 32px 35px;
}

.left {
    flex: 741;
    margin-right: 0;

    .title {
        font-size: 34px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #E9EBF1;
        margin: 0 0 27px 0;
    }

    .search-box {
        margin: 27px;
        margin-right: 0;

        .input-box {

            .input {
                border-radius: 5px 5px 5px 5px;
                border: 3px solid #2D57D2;
                padding: 0 17px;
                box-sizing: border-box;
                margin-right: 21px;
                position: relative;

                .result {
                    padding: 11px;
                    position: absolute;
                    left: -3px;
                    right: -3px;
                    top: 56px;
                    background: #2D57D2;
                    box-shadow: 0px 3px 8px 0px rgba(0, 12, 56, 0.75);
                    border-radius: 5px 5px 5px 5px;

                    .r-li {
                        padding: 3px 11px;
                        margin: 0 0 8px 0;
                        font-size: 21px;
                        border-radius: 5px;

                        &:last-of-type {
                            margin: 0;
                        }

                        &:hover {
                            background: #173CA8;
                        }
                    }
                }

                img {
                    margin: 11px 8px 11px 0;
                }

                input {
                    height: 46px;
                    background: #172C69;
                    font-size: 21px;
                    color: #FFFFFF;
                }
            }

            .btn {
                padding: 8px 32px;
                background: #2D57D2;
                border-radius: 5px 5px 5px 5px;
                font-size: 27px;
                color: #E9EBF1;
            }
        }


    }

    .list {
        margin: 27px;
        margin-right: 0;
        padding: 29px 35px;

        .title {
            margin-bottom: 19px;
        }

        .list-ul {
            flex-wrap: wrap;
            justify-content: space-between;

            .li {
                margin: 13px 0;
                padding: 10px 0;
                flex: 0 0 45%;
                text-align: center;
                border-radius: 11px;
                border: 3px solid #2D57D2;
                font-size: 30px;
                color: #E9EBF1;

                &:hover {
                    background: #173CA8;
                }
            }
        }
    }

}

.right {
    flex: 1099;
    margin: 27px;
    box-sizing: content-box;
    overflow-y: auto;

    .title {
        margin: 0 0 11px 0;
        font-size: 32px;
        color: #b5afaf;
    }

    .name {
        margin-bottom: 13px;
        text-align: center;
        font-size: 43px;
        font-weight: 500;
        color: #E9EBF1;
    }

    .content {
        font-size: 24px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        height: 650px;
        color: #E9EBF1;
        line-height: 31px;
        padding-bottom: 32px;

        .word {
            padding: 0 0 32px 0;
            line-height: 36px;
        }

        img {
            width: 296px;
            height: 211px;
            border-radius: 5px;
            background-color: #fff;
        }
    }
}
</style>
  